.x-radio {
  display: inline-flex;
  align-items: center;
  cursor: pointer;
  
  &__input {
    appearance: none;
    width: 18px;
    height: 18px;
    border: 2px solid #ddd;
    border-radius: 50%;
    margin-right: 8px;
    position: relative;
    transition: all 0.3s ease;
    
    &:checked {
      border-color: $color-primary;
      
      &::after {
        content: '';
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
        width: 10px;
        height: 10px;
        border-radius: 50%;
        background: $color-primary;
      }
    }
    
    &:hover {
      border-color: $color-sub;
    }
  }
}
